import React,{ Component,Fragment } from 'react';
import {
	StyleSheet,
	View,
	Text,
	TouchableOpacity,
	Image
} from 'react-native';


//维系一体化中月份选择组件
export default class SelectPicker extends Component{
	constructor(props){
		super(props)
		this.curIndex = 0;
		this.state = {
			curValue:''
		}
	}

	initDate = ()=>{
		const curValue = this.props.value[0];
		this.setState({ curValue })
	}
	
	prevDate = ()=>{
		for(let i=0; i<this.props.value.length; i++){
			if(this.state.curValue === this.props.value[i]){
				this.curIndex = i
			}
		}
		if(this.curIndex === 0){
			this.setState({
				curValue : this.props.value[this.props.value.length-1]
			},()=>{
				this.props.onValueChange(this.state.curValue)
			})
		}else{
			this.setState({
				curValue : this.props.value[this.curIndex-1]
			},()=>{
				this.props.onValueChange(this.state.curValue)
			})
		}
		
	}

	nextDate = ()=>{
		for(let i=0; i<this.props.value.length; i++){
			if(this.state.curValue === this.props.value[i]){
				this.curIndex = i
			}
		}
		if(this.curIndex === this.props.value.length-1){
			this.setState({
				curValue : this.props.value[0]
			},()=>{
				this.props.onValueChange(this.state.curValue)
			})
		}else{
			this.setState({
				curValue : this.props.value[this.curIndex+1]
			},()=>{
				this.props.onValueChange(this.state.curValue)
			})
		}
	}

	componentDidMount(){
		this.initDate()
	}

	render(){
		return(
			<View style={styles.dateWrap}>
				<TouchableOpacity 
					onPress={()=>this.prevDate()}
					style={[styles.button,{borderRightWidth:0,borderTopLeftRadius:4,borderBottomLeftRadius:4}]}
				>
					<Image 
						style={styles.arrowImg}
						source={require('../assets/images/arrow_left.png')}
					/>
				</TouchableOpacity>
				<View style={styles.txtWrap}>
					<Text style={styles.dateTxt}>{this.state.curValue}</Text>
				</View>
				<TouchableOpacity 
					onPress={()=>this.nextDate()}
					style={[styles.button,{borderLeftWidth:0,borderTopRightRadius:4,borderBottomRightRadius:4}]}
				>
					<Image 
						style={styles.arrowImg}
						source={require('../assets/images/arrow_right.png')}
					/>
				</TouchableOpacity>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	dateWrap:{
		width:240,
		height:40,
		flexDirection:'row'
	},
	arrowImg:{
		width:20,
		height:20
	},
	button:{
		width:40,
		height:40,
		justifyContent:'center',
		alignItems:'center',
		borderWidth:1,
		borderColor:'#ccc'
	},
	txtWrap:{
		width:160,
		height:40,
		justifyContent:'center',
		alignItems:'center',
		borderWidth:1,
		borderColor:'#ccc'
	},
	dateTxt:{
		fontSize:14,
		color:'#757575'
	}
})